<template>
  <!--头部工具组件-->
  <div class="header">
    <!--头部左侧图标li-->
    <ul>
      <li :title="isCollapse ? '展开菜单' : '收起菜单'" @click="toggleCollapse">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"/>
      </li>
      <li @click="reload" title="刷新">
        <i class="el-icon-refresh"/>
      </li>
    </ul>
    <!--头部右侧图标li-->
    <ul>
      <li @click="changeScreen" :title="isFullScreen ? '退出全屏' : '全屏'">
        <i :class="isFullScreen ? 'el-icon-close' : 'el-icon-full-screen'"/>
      </li>
      <li title="小雨">
        <i class="el-icon-heavy-rain"/>
      </li>
      <li title="在线聊天">
        <i class="el-icon-bell"/>
      </li>
      <li class="throwLiStyle" style="width: 100px">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            <!--用户头像 src默认未加载图片路径-->
            <el-avatar :size="30" src="" @error="avatarLoadingFailure" class="user_Face">
              <!--图片加载失败显示的默认图片-->
              <img src="../../assets/images/avatar/user1.png">
            </el-avatar>
            <!--<el-avatar :size="30" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" @error="() => true" class="user_Face">
              &lt;!&ndash;图片加载失败显示的默认图片&ndash;&gt;
              <img src="../../assets/images/avatar/default.png">
            </el-avatar>-->

            <!--用户名-->
            <span>{{userInfo.loginName}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="userInfo" icon="el-icon-s-custom">个人中心</el-dropdown-item>
              <el-dropdown-item command="setting" icon="el-icon-setting">系统设置</el-dropdown-item>
              <el-dropdown-item command="exit" icon="el-icon-switch-button" divided>注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li title="更多">
        <i class="el-icon-s-operation"/>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import constants from '@/config/constants/systemConstants';
  import { logout } from "@/utils/logout";

  export default {
    name: "HeaderBar",
    data() {
      return {
        //是否折叠左侧菜单
        isCollapse: false,
        //浏览器是否全屏展示
        isFullScreen: false,
      }
    },
    created() {
    },
    computed: {
      //获取当前登录用户信息
      ...mapState(['userInfo']),
    },
    methods: {
      //展开收起菜单
      toggleCollapse() {
        this.$emit('toggleCollapse', this.isCollapse = !this.isCollapse);
      },
      reload(){
        location.reload();
      },
      //全屏模式
      changeScreen(){
        if (!this.isFullScreen) {
          let ele = document.documentElement,
              reqFullScreen =
                  ele.requestFullScreen ||
                  ele.webkitRequestFullScreen ||
                  ele.mozRequestFullScreen ||
                  ele.msRequestFullscreen;
          if (reqFullScreen) {
            reqFullScreen.call(ele);
          }
          this.isFullScreen = true;
        } else {
          let ele = document.documentElement;
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.isFullScreen = false;
        }
      },
      /*用户信息下拉列表点击*/
      handleCommand(command) {
        switch (command) {
          case 'userInfo':
            this.$router.push('/personalCenter');
            break;
          case 'setting':
            break;
          case 'exit':
            this.$confirm('此操作将注销登录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //执行注销登录
              constants.logoutFlag = true;
              this.$api.postRequest('userLogout').then(res => {
                logout();
              });
            }).catch(() => {});
            break;
        }
      },
      //用户头像加载失败回调
      avatarLoadingFailure(){
        this.$message.error('用户头像加载失败！');
        return true;
      }
    }
  }
</script>

<style scoped>
  /*头部*/
  .header{
    display: flex;
    /*align-items: center;*/
    /*去除头部内边距多余的空格*/
    justify-content: space-between;
    border-bottom: 1px #F5F5F5 solid;
    box-sizing: border-box;
  }
  /*头部图标ul li*/
  header ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
  }
  header ul li{
    width: 50px;
    text-align: center;
    line-height: 60px;
  }
  /*鼠标移至头部icon*/
  header ul li:hover{
    background-color: #F7F7F7;
  }
  /*舍弃样式*/
  header .throwLiStyle:hover{
    background-color: #FFF;
  }
  /*显示的头像*/
  .el-dropdown-link{
    cursor: pointer;
  }
  /*用户头像*/
  .user_Face{
    margin-right: 10px;
    width: 30px;
    height: 32px;
    background-color: #FFF;
    vertical-align: middle;
  }
</style>
